<template>
  <div>
    <el-row>
      <el-col>
        <div class="ensure">
          <el-row>
            <el-col>
              <a href="javascript:" class="a1" v-for="(item,index) in ensure">
                <div class="a-img">
                  <img :src="item.src" />
                </div>{{item.anem}}
              </a>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <div class="bop-box">
          <div class="bop">
            <el-row>
              <el-col :span="6">
                <p class="p1">客户电话</p>
                <el-row>
                  <el-col>
                    <p class="p2">400-883-2688</p>
                  </el-col>
                  <el-col>
                    <p class="p3">外呼电话 020-83931899</p>
                  </el-col>
                  <el-col>
                    <a href="javascrpt:" class="a4">售后维修</a>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="13">
                <dl class="bop-dl" v-for="(item,index) in bop" :key="index">
                  <dd class="frist">{{item.name1}}</dd>
                  <a href="javascript:">
                    <dd>{{item.name2}}</dd>
                  </a>
                  <a href="javascript:">
                    <dd>{{item.name3}}</dd>
                  </a>
                  <a href="javascript:">
                    <dd>{{item.name4}}</dd>
                  </a>
                  <a href="javascript:">
                    <dd>{{item.name5}}</dd>
                  </a>
                </dl>
              </el-col>
              <el-col :span="4">
                <a href="javascript:" class="ma">
                  <img src="//image8.wbiao.co/mall/3493f349ca1b4e7e826c9bc8eff6f16e.png" />
                </a>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <p class="p-p">万表网名表商城 版权所有 2009-2019 ICP备案证书号:粤ICP备09108738号 网监备案:4401060103141</p>
                <p class="p-p1">广州市万表科技股份有限公司 地址:广州市番禺区番禺大道北60-1号</p>
                <p class="p-p2">Copyright 2009-2019 WWW.WBIAO.CN.LTD ALL RIGHT RESERVED.</p>
              </el-col>

            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row style="background-color: #F5F5F5;">
      <el-col>

        <div class="lowest">
          <a href="javascript:">
            <img src="//image8.wbiao.co/mall/ea49d2babdfb40e8a6299853dcdaad95.png" />
          </a>
          <a href="javascript:">
            <img src="//image8.wbiao.co/mall/974c6d4831df40e1a8f373b813bf0ff6.png" />
          </a>
          <a href="javascript:">
            <img src="//image8.wbiao.co/mall/18e503f988ff430b812ec5d44ae18565.png" />
          </a>
          <p class="lowest-p">
            <a href="javascript:" v-for="(item,index) in lop">{{item.pname}}</a>
            <i>></i>
          </p>
        </div>

      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        ensure: [{
            anem: "正品保障",
            src: require("@/assets/a.png")

          },
          {
            anem: "免息分期",
            src: require("@/assets/a2.png")
          },
          {
            anem: "全球联保",
            src: require("@/assets/a3.png")
          },
          {
            anem: "假一赔三",
            src: require("@/assets/a4.png")
          },
          {
            anem: "终身售后",
            src: require("@/assets/a5.png")
          }
        ],
        bop: [{
            name1: "新手指南",
            name2: "注册新会员",
            name3: "购物流程",
            name4: "手表小知识",
            name5: "退换货流程"
          },
          {
            name1: "支  付",
            name2: "支付方式",
            name3: "分期付款",
            name4: "发票说明",
            name5: "支付问题"
          },
          {
            name1: "配  送",
            name2: "包裹签收",
            name3: "配送方式",
            name4: "配送说明",
            name5: "自提流程"
          },
          {
            name1: "万表保障",
            name2: "正品保障",
            name3: "售后服务",
            name4: "价格保护",
            name5: "七天退换说明"
          },
          {
            name1: "开放合作",
            name2: "关于万表",
            name3: "商务合作",
            name4: "万表声明",
            name5: ""
          }
        ],
        lop: [{
            pname: "联系QQ3268217127"
          },
          {
            pname: "音乐巴士"
          },
          {
            pname: "手表问答"
          },
          {
            pname: "搜了网"
          },
          {
            pname: "海鸥"
          },
          {
            pname: "健客网上药店"
          },
          {
            pname: "名表回收"
          },
          {
            pname: "律师"
          },
          {
            pname: "B2B平台"
          },
          {
            pname: "美乐乐"
          }
        ]
      }
    },
    components: {

    },
    methods: {

    }
  }
</script>

<style scoped="scoped">
  .ensure {
    width: 1200px;
    /* border: 1px solid blue; */
    margin: 0 auto;
  }

  .ensure .a1 {

    /* height: 200px; */
    width: 220px;
    height: 70px;
    display: block;
    text-align: center;
    line-height: 70px;
    font-size: 14px;
    color: #666;
    float: left;
    position: relative;
    margin-right: 15px;
  }

  .ensure .a1 .a-img {
    width: 38px;
    left: 43px;
    top: 12px;
    position: absolute;

  }

  .ensure .a1 .a-img img {
    max-width: 100%;
  }

  .bop-box {
    background-color: #333;
    margin: 0 auto;

  }

  .bop-box .bop {
    width: 1200px;
    margin: 0 auto;

  }

  .bop-box .bop .p1 {
    font-size: 14px;
    color: #ccaa7a;
    font-weight: 700;
    padding-top: 30px;
    padding-bottom: 10px;
  }

  .bop-box .bop .p2 {
    font-size: 24px;
    color: #ccaa7a;
    font-weight: 700;
  }

  .bop-box .bop .p3 {
    font-size: 12px;
    color: #999;
  }

  .bop-box .bop .a4 {
    display: block;
    width: 134px;
    height: 38px;
    text-align: center;
    line-height: 38px;
    border: 1px solid #999;
    border-radius: 20px;
    margin-top: 10px;
    color: #999;
    font-size: 12px;
  }

  .bop-box .bop .bop-dl {
    margin-top: 30px;
    float: left;
    margin-right: 50px;
  }

  .bop-box .bop .bop-dl dd:hover {
    color: #FFFFFF;

  }

  .bop-box .bop .bop-dl .frist {
    color: #ccc;
    font-size: 14px;
    margin-bottom: 10px;
    font-weight: 700;
  }

  .bop-box .bop .bop-dl dd {
    font-size: 12px;
    margin-bottom: 10px;
    color: #999;
  }

  .bop-box .bop .ma {
    display: block;
    width: 113px;
    height: 130px;
    margin-top: 10px;
  }

  .bop-box .bop .p-p {
    text-align: center;
    font-size: 12px;
    padding-top: 30px;
    color: #999;
    padding-bottom: 7px;

  }

  .bop-box .bop .p-p1 {
    text-align: center;
    font-size: 12px;
    color: #999;
    padding-bottom: 7px;
  }

  .bop-box .bop .p-p2 {
    text-align: center;
    font-size: 12px;
    color: #999;
  }

  .lowest {
    width: 1200px;
    margin: 0 auto;
    height: 200px;
    text-align: center;
  }

  .lowest a {
    display: inline-block;
    /* width: 98px;
    height: 38px; */

    margin-top: 20px;
  }

  .lowest .lowest-p a {
    display: inline-block;
    font-size: 12px;
    margin-right: 20px;
    color: #999;
  }

  .lowest .lowest-p a:hover {
    color: #E5E5E5;
  }

  .lowest .lowest-p i {
    color: #999;
    font-style: normal;
  }
</style>
